<!DOCTYPE html>
<html>
<head>
<title>uphgall. usage</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/reset.min.css">
<link rel="stylesheet" type="text/css" href="../css/prettify.css">
<link rel="stylesheet" type="text/css" href="../css/index.css">
<script type="text/javascript" src="../js/prettify/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<div id="wrap">
<iframe width="100%" height="50" src="menu.html"></iframe>
<ul>
	<li>
		<a href="#usage">Использование</a>
		<ul>
			<li><a href="#userid">Где взять id пользователя, альбома и ключ доступа</a></li>
			<li><a href="#optionslist">Полный список параметров со значениями по умолчанию</a></li>
			<li><a href="#validsizes">Валидные размеры</a></li>
			<li><a href="#queryoptions">Параметры запроса и его обработки</a></li>
			<li>
				<a href="#htmlids">Идентификаторы HTML контейнеров</a>
				<ul>
					<li><a href="#htmlmetacont">Блок контейнеров для метаданных</a></li>
					<li><a href="#htmlmetaids">Блок идентификаторов метаданных</a></li>
					<li><a href="#htmlslide">Блок идентификаторов кнопки слайдшоу</a></li>
					<li><a href="#htmlnavcont">Блок контейнеров для пагинации и навигации</a></li>
					<li><a href="#htmlnavids">Блок идентификаторов кнопок пагинации и навигации</a></li>
					<li><a href="#htmlcode">Пример HTML каркаса со всеми элементами</a></li>
				</ul>
			</li>
			<li><a href="#loadoptions">Параметры показа и загрузки изображений</a></li>
		</ul>
	</li>
	<li><a href="#examples">Примеры</a></li>
</ul>

<h3 id="usage">Использование</h3>
<p>
	Ниже приведён полный список параметров со значениями по умолчанию, которые могут быть переданы функции инициализации. Передавать их все не обязательно, укажите только необходимые вам. Вы можете вообще не передавать ни одного параметра и получить список случайных изображений от Picasa Web Albums.
</p>
<h3 id="userid">Где взять id пользователя, альбома и ключ доступа</h3>
<ul>
	<li>
		<strong>id или имя пользователя</strong> можно узнать, зайдя в его галерею. Ссылка будет иметь вид:<br>
		picasaweb.google.com/<strong>105114498487014071079</strong><br>
		Цифры или буквы после первого слеша - это и есть имя пользователя или его id.
	</li>
	<li>
		<strong>id или имя альбома</strong> можно узнать, зайдя в сам альбом. Ссылка будет иметь вид<br>
		picasaweb.google.com/105114498487014071079/<strong>Demo</strong><br>
		Цифры или буквы после второго слеша - это название альбома или его id.
	</li>
	<li>
		<strong>Ключ доступа</strong> потребуется, если альбом защищён. Узнать его так же можно из ссылки.<br>
		picasaweb.google.com/105114498487014071079/Demo?authkey=<strong>Gv1sRgCIqsnKvDxbbkuAE</strong><br>
		Все знаки между 'authkey=' и ближайшим '&amp;' и есть ключ доступа.
	</li>
	<li>
		Аналогичным способом можно получить данные из ссылки на rss пользователя или альбома. Ссылка будет иметь вид:<br>
		picasaweb.google.com/data/feed/base/user/<strong>105114498487014071079</strong>/albumid/<strong>5745304712067832849</strong>?alt=rss&amp;kind=photo&amp;authkey=<strong>Gv1sRgCIqsnKvDxbbkuAE</strong>&amp;hl=ru
		<ul>
			<li>
				Цифры после <strong>user/</strong> это id пользователя.
			</li>
			<li>
				Цифры после <strong>albumid/</strong> это id альбома.
			</li>
			<li>
				Все знаки между <strong>authkey=</strong> и ближайшим <strong>&amp;</strong> это ключ доступа.
			</li>
		</ul>
	</li>
<li>
	<strong>Универсальный ключ доступа</strong> для всей своей галереи вы можете посмотреть на странице настроек Picasa Web Albums в поле "URL закрытой галереи"
</li>
</ul>
<h4>Почему лучше использовать id вместо имени</h4>
<p>
	Id присваивается однажды и до самого удаления альбома, а имя можно сменить. Следовательно, использование id обеспечивает более высокую надёжность ссылки.
</p>
<h3 id="optionslist">Полный список параметров со значениями по умолчанию</h3>
<pre class="prettyprint lang-js linenums">
uphgall({
	//параметры запроса и его обработки
	Cache:			true,
	User:			'',
	Album:			'',
	AuthKey:		'',
	Query:			'',
	Tag:			'',
	Location:		'',
	StartIndex:		null,
	MaxResults:		null,
	PublishedMin:		'',
	PublishedMax:		'',
	UpdatedMin:		'',
	UpdatedMax:		'',
	ValidSizes:		1,
	ThumbCrop:		true,
	ThumbHeight:		null,
	ThumbWidth:		null,
	ImgHeight:		null,
	ImgWidth:		null,
	
	//идентификаторы HTML контейнеров
	GalleryId:		'#uphgall',
		//блок контейнеров для метаданных
	AlbumId:		'.album',
	AuthorId:		'.author',
	CanvasId:		'.canvas',
	ThumbsId:		'.thumbs',
		//блок идентификаторов метаданных
	ImageId:		'.img',
	NameId:			'.name',
	LinkId:			'.link',
	DescriptionId:		'.description',
	TagsId:			'.tags',
	PublishedId:		'.published',
	UpdatedId:		'.updated',
	IndexId:		'.index',
	QuantityId:		'.quantity',
		//блок идентификаторов кнопки слайдшоу
	SlideShowId:		'.slideshow',
	PlayId:			'.play',
	StopId:			'.stop',
		//блок контейнеров для пагинации и навигации
	NavigationId:		'.navigation',
	PaginationId:		'.pagination',
		//блок идентификаторов кнопок пагинации и навигации
	PSpacerId:		'.spacer',
	PPageId:		'.page',
	
	FirstId:		'.first',
	PrevId:			'.prev',
	NextId:			'.next',
	LastId:			'.last',
	
	CurrentId:		'.current',
	
	//параметры показа и загрузки изображений
	ThumbsCapacity:		null,
	StartImage:		1,
	ThreadsThumbs:		16,
	ThreadsCanvas:		2,
	PreloadQuantityBefore: 	1,
	PreloadQuantityAfter: 	3,
	PreloadOrder:		2,
	
	TransitionTime:		200,
	SlideShowTime:		5000,
	AutoStart:		false
})
</pre>
<h3 id="validsizes">Валидные размеры</h3>
<p>
Валидные размеры миниатюр: 32, 48, 64, 72, 104, 144, 150, 160<br>
Валидные размеры изображений: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
</p>
<h3 id="queryoptions">Параметры запроса и его обработки</h3>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">Cache:		true	//boolean</pre>
		<p>
		Кеширование списка изображений. Позволяет ускорить загрузку альбома при следующем визите. Указывайте <span class="kwd">false</span>, если имеете дело с быстрообновляющимися списками изображений. Например, выборкой по тегу из всей базы Picasa Web Albums.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">User:		''	//text</pre>
		<p>
		Имя или id пользователя. Указывайте, если хотите выбрать изображения из галереи конкретного пользователя. Если хотите сделать выборку из всей базы Picasa Web Albums, оставляйте поле пустым.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">Album:		''	//text</pre>
		<p>
		Название или id альбома. Указывайте, если хотите выбрать изображения из конкретного альбома. Если хотите сделать выборку из всей галереи пользователя или базы Picasa Web Albums, оставляйте поле пустым. 
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">AuthKey:	''	//text</pre>
		<p>
		Ключ доступа. Указывайте только при доступе к закрытому альбому.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">Query:		''	//text</pre>
		<p>
		Выборка по названию, описанию или тегам изображения. Если указано несколько слов (1), будут выбраны изображения, содержащие все эти слова. Если необходимо искать по фразе, то её нужно заключить в кавычки (2). Если нужно сделать исключение из поиска, то перед ним нужно поставить '-' (3).
		</p>
<pre class="prettyprint lang-js linenums">
Query:'red car'
Query:'"night sky" moon'
Query:'"night sky" -moon'
</pre>
	</li>
	<li>
		<pre class="prettyprint lang-js light">Tag:		''	//text</pre>
		<p>
		Выборка только по тегам изображения. Синтаксис как у параметра <span class="typ">Query</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">Location:	''	//text</pre>
		<p>
		Выборка по географическому расположению.
		</p>
		<pre class="prettyprint lang-js light">Location:'киев'</pre>
	</li>
	<li>
		<pre class="prettyprint lang-js light">StartIndex:	null	//number</pre>
		<p>
		Диапазон: 1 &lt; <span class="typ">StartIndex</span><br>Выборка по порядковому номеру изображений из всех, соответствующих запросу. Выберутся только изображения с порядковыми номерами больше указанного.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">MaxResults:	null	//number</pre>
		<p>
		Диапазон: 0 &lt; <span class="typ">MaxResults</span><br>Выборка по порядковому номеру изображений из всех, соответствующих запросу. Выберется указанное количество изображений. При выборке из всей базы Picasa Web Albums, в случае отсутствия этого параметра, будет выбрано 500 результатов.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PublishedMin:	''	//text</pre>
		<p>
		Выборка по времени публикации. Выбираются изображения, опубликованные позже указанной даты. Дату необходимо указывать в формате RFC-3339.
		</p>
		<pre class="prettyprint lang-js light">PublishedMin:'2005-08-09T10:57:00-08:00'</pre>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PublishedMax:	''	//text</pre>
		<p>
		Выборка по времени публикации. Выбираются изображения, опубликованные раньше указанной даты. Синтаксис как у параметра <span class="typ">PublishedMin</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">UpdatedMin:	''	//text</pre>
		<p>
		Выборка по времени обновления изображения. Выбираются изображения, обновлённые позже указанной даты. Синтаксис как у параметра <span class="typ">PublishedMin</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">UpdatedMax:	''	//text</pre>
		<p>
		Выборка по времени обновления изображения. Выбираются изображения, обновлённые раньше указанной даты. Синтаксис как у параметра <span class="typ">PublishedMin</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ValidSizes:	1	//number</pre>
		<p>
		Диапазон: 0, 1<br>Автоматическое изменение разрешений изображений на валидные, в соответствии с требованием протокола google.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ThumbCrop:	true	//boolean</pre>
		<p>
		Использование квадратных миниатюр.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ThumbHeight:	null	//number</pre>
		<p>
		Диапазон: <span class="typ">ThumbHeight</span> &lt;= 160<br>
		Валидные значения: 32, 48, 64, 72, 104, 144, 150, 160<br>
		При отсутсвии параметра или значения будет взят размер первого родительского элемента <span class="typ">ImageId</span> внутри контейнера <span class="typ">ThumbsId</span><br>
		Высота миниатюры в пикселах.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ThumbWidth:	null	//number</pre>
		<p>
		Ограничения как у <span class="typ">ThumbHeight</span><br>
		Ширина миниатюры в пикселах.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ImgHeight:	null	//number</pre>
		<p>
		Диапазон: <span class="typ">ImgHeight</span> &lt;= 1600<br>
		Валидные значения: 94, 110, 128, 200, 220, 288, 320, 400, 512, 576, 640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600<br>
		При отсутсвии параметра или значения будет взят размер первого родительского элемента <span class="typ">ImageId</span> внутри контейнера <span class="typ">CanvasId</span><br>
		Высота изображения в пикселах.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ImgWidth:	null	//number</pre>
		<p>
		Ограничения как у <span class="typ">ImgHeight</span><br>
		Ширина изображения в пикселах.
		</p>
	</li>
</ul>

<h3 id="htmlids">идентификаторы HTML контейнеров</h3>
<p>
В следующем блоке параметров в качестве идентификаторов элементов галереи используются обычные CSS селекторы.
</p>
<ul>
	<li>
		div, span, ul, li - HTML теги 
	</li>
	<li>
		#uphgall, #wrap, #main - id 
	</li>
	<li>
		.album, .author, .photo - class 
	</li>
</ul>
<br>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">GalleryId:	'#uphgall'</pre>
		<p>
		Контейнер галереи, содержащий все остальные элементы. При его отсутствии в HTML коде скрипт прекращает свою работу.
		</p>
	</li>
</ul>
<h4 id="htmlmetacont">Блок контейнеров для метаданных</h4>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">AlbumId:	'.album'</pre>
		<p>
		Контейнер для информации о альбоме.<br>
		Влияет на содержание контейнеров: <span class="typ">NameId</span>, <span class="typ">LinkId</span>, <span class="typ">DescriptionId</span>, <span class="typ">UpdatedId</span>
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">AuthorId:	'.author'</pre>
		<p>
		Контейнер для информации о авторе.<br>
		Влияет на содержание контейнеров: <span class="typ">NameId</span>, <span class="typ">LinkId</span>

		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">CanvasId:	'.canvas'</pre>
		<p>
		Контейнер для информации об активном изображении и самого изображения.<br>
		Влияет на содержание контейнеров: <span class="typ">NameId</span>, <span class="typ">LinkId</span>, <span class="typ">DescriptionId</span>, <span class="typ">UpdatedId</span>, <span class="typ">PublishedId</span>, <span class="typ">TagsId</span>, <span class="typ">IndexId</span>
		</p>
	</li>
</ul>
<h4 id="htmlmetaids">Блок идентификаторов метаданных</h4>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">ThumbsId:	'.thumbs'</pre>
		<p>
		Контейнер для информации об изображении и миниатюр, должен быть элементом <span class="kwd">ul</span> или <span class="kwd">ol</span> с одним <span class="kwd">li</span>, внутри которого сформирована структура, которая в дальнейшем продублируется для каждой миниатюры.<br>
		Влияет на содержание контейнеров: <span class="typ">NameId</span>, <span class="typ">LinkId</span>, <span class="typ">DescriptionId</span>, <span class="typ">UpdatedId</span>, <span class="typ">PublishedId</span>, <span class="typ">TagsId</span>, <span class="typ">IndexId</span>
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ImageId:	'.img'</pre>
		<p>
		Контейнер для изображения, должен быть элементом <span class="kwd">img</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">NameId:		'.name'</pre>
		<p>
		Контейнер для названия альбома, имени автора, названия изображения.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">LinkId:		'.link'</pre>
		<p>
		Контейнер для ссылки на альбом, галерею автора, изображение, в котором могут быть размещены другие элементы. Должен быть элементом <span class="kwd">a</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">DescriptionId:	'.description'</pre>
		<p>
		Контейнер для описания альбома или изображения.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">TagsId:		'.tags'</pre>
		<p>
		Контейнер для тегов изображения.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PublishedId:	'.published'</pre>
		<p>
		Контейнер для даты обновления изображения. 
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">UpdatedId:	'.updated'</pre>
		<p>
		Контейнер для даты публикации изображения.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">IndexId:	'.index'</pre>
		<p>
		Контейнер для порядкового номера изображения.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">QuantityId:	'.quantity'</pre>
		<p>
		Контейнер для количества изображений. Может быть размещён в любом месте галереи.
		</p>
	</li>
</ul>
<h4 id="htmlslide">Блок идентификаторов кнопки слайдшоу</h4>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">SlideShowId:	'.slideshow'</pre>
		<p>
		Идентификатор кнопки слайдшоу. Может быть размещён в любом месте галереи.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PlayId:		'.play'</pre>
		<p>
		Идентификатор кнопки слайдшоу в режиме воспроизведения. Добавляется автоматически.<br>
		Текст можно добавить с помощью CSS:
		</p>
		<pre class="prettyprint lang-css light">.play:after{content:"stop"}</pre>
	</li>
	<li>
		<pre class="prettyprint lang-js light">StopId:		'.stop'</pre>
		<p>
		Идентификатор кнопки слайдшоу в остановленном состоянии. Добавляется автоматически.<br>
		Текст можно добавить с помощью CSS:
		</p>
		<pre class="prettyprint lang-css light">.stop:after{content:"play"}</pre>
	</li>
</ul>
<h4 id="htmlnavcont">Блок контейнеров для пагинации и навигации</h4>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">NavigationId:	'.navigation'</pre>
		<p>
		Контейнер, содержащий элементы навигации.<br>
		Может содержать элементы: <span class="typ">FirstId</span>, <span class="typ">PrevId</span>, <span class="typ">NextId</span>, <span class="typ">LastId</span>.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PaginationId:	'.pagination'</pre>
		<p>
		Контейнер, содержащий элементы пагинации. Должен быть элементом <span class="kwd">ul</span> или <span class="kwd">ol</span>.<br>
		Может содержать элементы: <span class="typ">FirstId</span>, <span class="typ">PrevId</span>, <span class="typ">NextId</span>, <span class="typ">LastId</span>, <span class="typ">PSpacerId</span>, <span class="typ">PPageId</span>.
		</p>
	</li>
</ul>
<h4 id="htmlnavids">Блок идентификаторов кнопок пагинации и навигации</h4>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">PSpacerId:	'.spacer'</pre>
		<p>
		Контейнер для разрыва в нумерации страниц.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PPageId:	'.page'</pre>
		<p>
		Контейнер, содержащий номер страницы. Может быть как <span class="kwd">li</span>, так и другим элементом внутри <span class="kwd">li</span>. 
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">FirstId:	'.first'</pre>
		<p>
		Элемент для перехода на первую страницу или изображение.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PrevId:		'.prev'</pre>
		<p>
		Элемент для перехода на предыдущую страницу или изображение.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">NextId:		'.next'</pre>
		<p>
		Элемент для перехода на следующую страницу или изображение.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">LastId:		'.last'</pre>
		<p>
		Элемент для перехода на последнюю страницу или изображение.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">CurrentId:	'.current'</pre>
		<p>
		Идентификатор активной страницы или изображения в контейнере <span class="typ">ThumbsId</span>. Добавляется автоматически.
		</p>
	</li>
</ul>
<h4 id="htmlcode">Пример HTML каркаса со всеми элементами</h4>
<p>
	На первый взгляд выглядит громоздко, но это пример во <strong>всеми</strong> элементами. Во многих случаях можно обойтись третью или четвертью от всего перечисленного.
</p>
<pre class="prettyprint lang-html linenums long">
&lt;div class="uphgall"&gt;		&lt;!--Главный контейнер галареи--&gt;
	&lt;div class="album"&gt;			&lt;!--Контейнер для информации об альбоме--&gt;
		&lt;span class="name"&gt;&lt;/span&gt;			&lt;!--Название альбома--&gt;
		&lt;a class="link" target="_blank"&gt;&lt;/a&gt;		&lt;!--Ссылка на альбом--&gt;
		&lt;span class="description"&gt;&lt;/span&gt;		&lt;!--Описание альбома--&gt;
		&lt;span class="updated"&gt;&lt;/span&gt;			&lt;!--Дата последнего обновления альбома--&gt;
		&lt;div class="author"&gt;		&lt;!--Контейнер для информации об авторе. Для примера находится внутри контейнера AlbumId--&gt;
			&lt;span class="name"&gt;&lt;/span&gt;		&lt;!--Имя автора--&gt;
			&lt;a class="link" target="_blank"&gt;&lt;/a&gt;	&lt;!--Ссылка на автора--&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class="canvas navigation"&gt;		&lt;!--Контейнер для информации о текущем изображении. Совмещён с контейнером для навигации для примера--&gt;
		&lt;span class="name"&gt;&lt;/span&gt;			&lt;!--Название изображения--&gt;
		&lt;a class="link" target="_blank"&gt;&lt;/a&gt;		&lt;!--Ссылка на изображение--&gt;
		&lt;img class="img next"&gt;				&lt;!--Контейнер для изображения. Совмещён с элементом навигации для примера--&gt;
		&lt;span class="index"&gt;&lt;/span&gt;			&lt;!--Номер изображения--&gt;
		&lt;span class="quantity"&gt;&lt;/span&gt;			&lt;!--Общее количество изображений--&gt;
		&lt;span class="description"&gt;&lt;/span&gt;		&lt;!--Описание изображения--&gt;
		&lt;span class="updated"&gt;&lt;/span&gt;			&lt;!--Дата последнего обновления изображения--&gt;
		&lt;span class="published"&gt;&lt;/span&gt;			&lt;!--Дата публикации изображения--&gt;
		&lt;span class="tags"&gt;&lt;/span&gt;			&lt;!--Теги изображения--&gt;
	&lt;/div&gt;
	&lt;div class="navigation"&gt;		&lt;!--Контейнер для элементов навигации--&gt;
		&lt;span class="slideshow"&gt;&lt;/span&gt;			&lt;!--Кнопка слайдшоу--&gt;
		&lt;span class="first"&gt;first&lt;/span&gt;		&lt;!--Первое изображение--&gt;
		&lt;span class="prev"&gt;prev&lt;/span&gt;			&lt;!--Предыдущее--&gt;
		&lt;span class="next"&gt;next&lt;/span&gt;			&lt;!--Следующее--&gt;
		&lt;span class="last"&gt;last&lt;/span&gt;			&lt;!--Последнее--&gt;
	&lt;/div&gt;
	&lt;ul class="pagination"&gt;			&lt;!--Контейнер для пагинации--&gt;
		&lt;li class="first"&gt;first&lt;/li&gt;			&lt;!--Первая страница--&gt;
		&lt;li class="prev"&gt;prev&lt;/li&gt;			&lt;!--Предыдущая--&gt;
		&lt;li class="page"&gt;&lt;/li&gt;				&lt;!--Контейнер для номера страницы--&gt;
		&lt;li class="spacer"&gt;...&lt;/li&gt;			&lt;!--Контейнер для разрывов в нумерации страниц--&gt;
		&lt;li class="next"&gt;next&lt;/li&gt;			&lt;!--Следующая--&gt;
		&lt;li class="last"&gt;last&lt;/li&gt;			&lt;!--Последняя--&gt;
	&lt;/ul&gt;
	&lt;ul class="thumbs"&gt;			&lt;!--Контейнер для информации об изображениях и миниатюр--&gt;
		&lt;li&gt;
			&lt;span class="index"&gt;&lt;/span&gt;		&lt;!--Порядковый номер изображения--&gt;
			&lt;img class="img"&gt;			&lt;!--Контейнер для изображения--&gt;
			&lt;span class="name"&gt;&lt;/span&gt;		&lt;!--Название изображения--&gt;
			&lt;a class="link" target="_blank"&gt;&lt;/a&gt;	&lt;!--Ссылка на изображение--&gt;
			&lt;span class="description"&gt;&lt;/span&gt;	&lt;!--Описание изображения--&gt;
			&lt;span class="updated"&gt;&lt;/span&gt;		&lt;!--Дата последнего обновления изображения--&gt;
			&lt;span class="published"&gt;&lt;/span&gt;		&lt;!--Дата публикации изображения--&gt;
			&lt;span class="tags"&gt;&lt;/span&gt;		&lt;!--Теги изображения--&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/div&gt;
</pre>

<h3 id="loadoptions">Параметры показа и загрузки изображений</h3>
<ul class="query">
	<li>
		<pre class="prettyprint lang-js light">ThumbsCapacity:		null</pre>
		<p>
		Количество элементов на странице. Вычисляется автоматически при осутствии параметра или его значинии &lt; 1, но требует указания размеров для контейнера <span class="typ">ThumbsId</span> и <span class="kwd">li</span> внутри него.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">StartImage:		1</pre>
		<p>
		Номер изображения, с которого начнётся просмотр при загрузке альбома.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ThreadsThumbs:		16</pre>
		<p>
		Диапазон: 1 &lt; <span class="typ">ThreadsThumbs</span><br>
		Количество потоков загрузки миниатюр. Ограничено настройками браузера.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">ThreadsCanvas:		2</pre>
		<p>
		Диапазон: 1 &lt; <span class="typ">ThreadsCanvas</span><br>
		Количество потоков загрузки изображений. Ограничено настройками браузера.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PreloadQuantityBefore:	1</pre>
		<p>
		Диапазон: 0 &lt; <span class="typ">PreloadQuantityBefore</span><br>
		Количество предзагружаемых изображений перед текущим.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PreloadQuantityAfter:	3</pre>
		<p>
		Диапазон: 0 &lt; <span class="typ">PreloadQuantityAfter</span><br>
		Количество предзагружаемых изображений после текущего.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">PreloadOrder:		2</pre>
		<p>
		Диапазон: 1 &lt;= <span class="typ">PreloadOrder</span><br>
		Порядок предзагрузки изображений. Определяет, через сколько следующих изображений загрузится предыдущее. Имеет реверсивный характер.<br>
		</p>
<pre class="prettyprint lang-js light">
StartImage:	10

PreloadOrder:	1 //11, 9, 12, 8, 13, 7
PreloadOrder:	2 //11, 12, 9, 13, 14, 8
PreloadOrder:	3 //11, 12, 13, 9, 14, 15, 16, 8
</pre>
	</li>
	<li>
		<pre class="prettyprint lang-js light">TransitionTime:		200</pre>
		<p>
		Диапазон: 0 &lt; <span class="typ">TransitionTime</span><br>
		Продолжительность смены изображений в мс.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">SlideShowTime:		5000</pre>
		<p>
		Диапазон: 2 *  <span class="typ">TransitionTime</span> &lt; <span class="typ">SlideShowTime</span><br>
		Время между сменой изображений в режиме слайдшоу в мс.
		</p>
	</li>
	<li>
		<pre class="prettyprint lang-js light">AutoStart:		false</pre>
		<p>
		Флаг автовоспроизведения слайдшоу при загрузке страницы. 
		</p>
	</li>
</ul>
<a id="examples" class="next" href="examples.html"><span>>>></span>Примеры</a>
</div><!--id=wrap-->
</body>
</html>
